<script setup lang="ts">
import type { MovieItem } from "~/types";

defineProps<{
  record: MovieItem;
}>();
</script>

<template>
  <NuxtLink :to="`/play/video/${record.id}`" pb2>
    <div
      w-180px
      block
      bg-gray4:10
      p1
      class="aspect-10/16"
      transition
      duration-400
      hover="scale-105 z10"
    >
      <NuxtImg
        v-if="record.cover"
        width="400"
        height="600"
        format="webp"
        :src="record.cover"
        :alt="record.movieName"
        w-full
        h-full
        object-cover
        :style="{
          'view-transition-name': `item-${record.id}`,
        }"
      />
      <div v-else h-full op10 flex>
        <div i-ph:question ma text-4xl />
      </div>
    </div>
    <div mt-2 text-wrap w-160px text-center>
      {{ record.movieName }}
    </div>
    <div flex text-sm gap-2 items-center>
      <!-- <StarsRate w-20 :value="item.vote_average" /> -->
      <div op60>
        <!-- {{ formatVote(item.vote_average) }} -->
      </div>
    </div>
  </NuxtLink>
</template>
